﻿<!DOCTYPE html>
<html>
<head>
    <title>BostonAzure.org Mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
	<link rel="stylesheet" href="css/events.css"/> 
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="js/datajs-0.0.1.min.js"></script>
<script src="js/bostonazure-events.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script>
    $(document).ready(function () {
        loadEvents({
            numResults: 1,
            loadHandler: function (html) {
                $("#content").append(html);
                $("#baug-home").page("destroy").page();
            }
        })
        $('#events').live('pagebeforeshow', function (event, ui) {
            loadEvents({
                numResults: 'all',
                loadHandler: function (html) {
                    $("#eventscontent").append(html);
                }
            })
        });
    });     // end $(document).ready
</script>
<link rel="stylesheet" type="text/css" href="css/events.css" />
</head>
<body>
<div data-role="page" data-theme="b" id="baug-home"> 
	<div id="baug-homeheader"> 
		<h1 id="baug-logo"><img src="/_assets/images/logo.png" alt="BostonAzure.org Mobile" /></h1> 
	</div> 

		<div data-role="collapsible" data-collapsed="false" data-theme="c">           <h1 >Upcoming events:</h1>           <div data-role="content" id="content" data-theme="b"></div>        </div>
	
	<div data-role="content"> 
		<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" "> 
			<li data-role="list-divider"></li> 
			<li><a href="events.html" id="events">Past Events</a></li> 
			<li><a href="about.html" id="about">About BostonAzure.org</a></li> 
		</ul> 		
 	</div> 
</div> 
</body>
</html>
